<template>
	<div class="swiper">
	 <swiper :options="swiperOption">

    <swiper-slide 
    v-for='item in swiperList' 
    :key='item.id'>
    	<img class="imgimg" :src="item.imgUrl" alt="">
    </swiper-slide>

    <div class="swiper-pagination"  slot="pagination"></div>
  
  </swiper>
	</div>
</template>
<script type="text/javascript">
	
	export default {
		props:['swiperList'],
		data () {
			return {
				swiperOption:{
					 pagination: {
           			 el: '.swiper-pagination'
          			},
          			loop:true
				}
			}
		}
	}

</script>
<style type="text/css" scoped lang="stylus">
	.swiper{
		height: 0;
		overflow: hidden;
		padding-bottom: 26.67%;
		background: #ccc;
	}
	.swiper .imgimg{
		height: 100%;
		width: 100%;
	}
	
	.swiper >>> .swiper-pagination-bullet-active{
		background: #fff;
	}
</style>